<template>
    <div class="com-title">
        <div class="left-cont">
            <div class="title">
                <h2>{{ titleInfo.titles }}</h2>
                <span class="sign" :style="{'background-image': titleInfo.sign}"></span>
            </div>
            <div class="title-date">
                <span>{{ titleInfo.Time }}</span>
            </div>
        </div>
        <div class="right-cont">
            <div class="more">
                <span>{{ titleInfo.more.moreTit }}</span>
                <img v-if="titleInfo.more.show" src="/static/images/change.png"></img>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['titleInfo'],
    data() {
        return {
        }
    },
    methods: {
    },
    mounted() {
    }
}
</script>

<style>
.com-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.com-title .left-cont {
    display: flex;
    align-items: flex-end;
}
.com-title .title {
    position: relative;
}
.com-title .title h2 {
    font-size: 0.42rem;
    font-family:PingFangSC-Semibold;
    font-weight:600;
    color:rgba(51,51,51,1);
    line-height: 0.55rem;
    position: relative;
    z-index: 2;
}
.com-title .title span.sign {
    display: block;
    width: 0.56rem;
    height: 0.22rem;
    border-radius: 100%;
    position: absolute;
    right: -8px;
    top: 7px;
    transform: rotate(-30deg);
}
.com-title .title-date {
    margin-left: 10px;
}
.com-title .title-date span {
    font-size: 0.3rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(120,120,120,1);
    line-height: 0.3rem;
}
.com-title .right-cont .more {
    display: flex;
    align-items: flex-end;
}
.com-title .right-cont .more span {
    font-size: 0.28rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height: 0.45rem;
}
.com-title .right-cont .more img {
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 5px;
}
</style>
